<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#00F0FF',    // 亮青色
                        secondary: '#9D4EDD',  // 紫色
                        accent: '#FF2E63',     // 亮红色
                        dark: '#050A30',       // 深蓝黑色
                        light: '#E8F9FD',      // 浅蓝白色
                        neon: '#00FF66'        // 霓虹绿
                    },
                    fontFamily: {
                        future: ['"Orbitron"', '"Rajdhani"', 'sans-serif']
                    },
                    boxShadow: {
                        'neon': '0 0 5px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.3)',
                        'neon-purple': '0 0 5px rgba(157, 78, 221, 0.5), 0 0 20px rgba(157, 78, 221, 0.3)',
                        'neon-red': '0 0 5px rgba(255, 46, 99, 0.5), 0 0 20px rgba(255, 46, 99, 0.3)'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow-neon {
                text-shadow: 0 0 10px rgba(0, 240, 255, 0.7), 0 0 20px rgba(0, 240, 255, 0.5);
            }
            .text-shadow-neon-purple {
                text-shadow: 0 0 10px rgba(157, 78, 221, 0.7), 0 0 20px rgba(157, 78, 221, 0.5);
            }
            .bg-grid {
                background-image: 
                    linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .bg-tech {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300f0ff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
            .border-glow {
                box-shadow: 0 0 5px rgba(0, 240, 255, 0.5), 0 0 10px rgba(0, 240, 255, 0.3);
                border: 1px solid rgba(0, 240, 255, 0.5);
            }
            .glitch-effect {
                position: relative;
            }
            .glitch-effect::before, .glitch-effect::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .glitch-effect::before {
                left: 2px;
                text-shadow: -2px 0 #ff2e63;
                clip: rect(44px, 450px, 56px, 0);
                animation: glitch-anim 5s infinite linear alternate-reverse;
            }
            .glitch-effect::after {
                left: -2px;
                text-shadow: -2px 0 #00f0ff;
                clip: rect(44px, 450px, 56px, 0);
                animation: glitch-anim2 5s infinite linear alternate-reverse;
            }
            @keyframes glitch-anim {
                0% { clip: rect(42px, 9999px, 44px, 0); }
                5% { clip: rect(12px, 9999px, 59px, 0); }
                10% { clip: rect(48px, 9999px, 29px, 0); }
                15% { clip: rect(42px, 9999px, 73px, 0); }
                20% { clip: rect(63px, 9999px, 27px, 0); }
                25% { clip: rect(34px, 9999px, 55px, 0); }
                30% { clip: rect(86px, 9999px, 73px, 0); }
                35% { clip: rect(20px, 9999px, 20px, 0); }
                40% { clip: rect(26px, 9999px, 60px, 0); }
                45% { clip: rect(25px, 9999px, 66px, 0); }
                50% { clip: rect(57px, 9999px, 98px, 0); }
                55% { clip: rect(5px, 9999px, 46px, 0); }
                60% { clip: rect(82px, 9999px, 31px, 0); }
                65% { clip: rect(54px, 9999px, 27px, 0); }
                70% { clip: rect(28px, 9999px, 99px, 0); }
                75% { clip: rect(45px, 9999px, 69px, 0); }
                80% { clip: rect(23px, 9999px, 85px, 0); }
                85% { clip: rect(54px, 9999px, 84px, 0); }
                90% { clip: rect(45px, 9999px, 47px, 0); }
                95% { clip: rect(37px, 9999px, 20px, 0); }
                100% { clip: rect(4px, 9999px, 91px, 0); }
            }
            @keyframes glitch-anim2 {
                0% { clip: rect(65px, 9999px, 100px, 0); }
                5% { clip: rect(52px, 9999px, 74px, 0); }
                10% { clip: rect(79px, 9999px, 85px, 0); }
                15% { clip: rect(75px, 9999px, 5px, 0); }
                20% { clip: rect(67px, 9999px, 61px, 0); }
                25% { clip: rect(14px, 9999px, 79px, 0); }
                30% { clip: rect(1px, 9999px, 66px, 0); }
                35% { clip: rect(86px, 9999px, 30px, 0); }
                40% { clip: rect(23px, 9999px, 98px, 0); }
                45% { clip: rect(85px, 9999px, 72px, 0); }
                50% { clip: rect(71px, 9999px, 75px, 0); }
                55% { clip: rect(2px, 9999px, 48px, 0); }
                60% { clip: rect(30px, 9999px, 16px, 0); }
                65% { clip: rect(59px, 9999px, 50px, 0); }
                70% { clip: rect(41px, 9999px, 62px, 0); }
                75% { clip: rect(2px, 9999px, 82px, 0); }
                80% { clip: rect(47px, 9999px, 73px, 0); }
                85% { clip: rect(3px, 9999px, 27px, 0); }
                90% { clip: rect(26px, 9999px, 55px, 0); }
                95% { clip: rect(42px, 9999px, 97px, 0); }
                100% { clip: rect(38px, 9999px, 49px, 0); }
            }
            .pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .scanline {
                position: relative;
            }
            .scanline::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 20px;
                background: rgba(255, 255, 255, 0.05);
                animation: scan 6s linear infinite;
            }
            @keyframes scan {
                0% { top: -50%; }
                100% { top: 100%; }
            }
            .scroll-reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }
            .scroll-reveal.active {
                opacity: 1;
                transform: translateY(0);
            }
            .content-panel {
                backdrop-filter: blur(8px);
                background: rgba(5, 10, 48, 0.6);
            }
            .animated-border {
                position: relative;
                border: 1px solid transparent;
                background-clip: padding-box;
            }
            .animated-border::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 1px solid rgba(0, 240, 255, 0.5);
                border-radius: inherit;
                animation: border-rotate 8s linear infinite;
                pointer-events: none;
            }
            @keyframes border-rotate {
                0% { border-color: rgba(0, 240, 255, 0.5); }
                25% { border-color: rgba(157, 78, 221, 0.5); }
                50% { border-color: rgba(255, 46, 99, 0.5); }
                75% { border-color: rgba(0, 255, 102, 0.5); }
                100% { border-color: rgba(0, 240, 255, 0.5); }
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light font-future bg-tech scanline">
    <!-- 顶部状态栏 -->
    <div class="bg-dark/90 border-b border-primary/20 py-1 px-4 text-xs text-primary/80 flex justify-between items-center">
        <div class="flex items-center gap-4">
            <span>SYSTEM ONLINE</span>
            <span>STATUS: NORMAL</span>
            <span>VERSION: 4.7.2</span>
        </div>
        <div class="flex items-center gap-2">
            <span>CONNECTED</span>
            <span class="w-2 h-2 bg-neon rounded-full pulse-slow"></span>
        </div>
    </div>

    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-dark/70 backdrop-blur-md border-b border-primary/30">
        <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
            <!-- 游戏Logo -->
            <a href="#" class="flex items-center gap-2 text-2xl font-bold text-primary text-shadow-neon">
                <i class="fa fa-microchip text-neon text-3xl"></i>
                <span><?php echo $t['siteTitle']; ?></span>
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-light text-2xl">
                <i class="fa fa-bars"></i>
            </button>
            
            <!-- 导航菜单 -->
            <nav id="main-nav" class="hidden w-full md:flex md:w-auto mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row gap-2 md:gap-6">
                    <?php foreach($t['nav'] as $item) : ?>
                        <li>
                            <a href="<?php echo $item['link']; ?>" class="block py-2 px-3 rounded 
                                <?php echo isset($item['isCta']) ? 'bg-accent text-light font-bold shadow-neon-red' : 'text-light hover:bg-primary/10 border border-primary/30'; ?>">
                                <?php echo $item['name']; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                    
                    <!-- 语言切换 -->
                    <li class="relative group">
                        <a href="#" class="block py-2 px-3 rounded hover:bg-primary/10 border border-primary/30 flex items-center gap-1">
                            <i class="fa fa-globe text-primary"></i>
                            <span><?php echo $t['lang'][$lang]; ?></span>
                            <i class="fa fa-chevron-down text-xs"></i>
                        </a>
                        <ul class="absolute right-0 mt-2 w-36 bg-dark/90 border border-primary/30 rounded py-2 hidden group-hover:block z-50 backdrop-blur-sm">
                            <?php foreach($t['lang'] as $code => $name) : ?>
                                <li>
                                    <a href="?lang=<?php echo $code; ?>" class="block px-4 py-2 hover:bg-primary/10 <?php echo $lang == $code ? 'bg-primary/10 font-bold' : ''; ?>">
                                        <?php echo $name; ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <!-- 英雄区域 - 新布局：全屏宽幅带浮动元素 -->
        <section id="hero" class="relative overflow-hidden min-h-[85vh] flex items-center bg-grid">
            <!-- 背景装饰 -->
            <div class="absolute inset-0 z-0">
                <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
                <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div>
                <img src="https://picsum.photos/id/1/1920/1080" alt="未来科技背景" class="w-full h-full object-cover opacity-30">
                <!-- 网格覆盖层 -->
                <div class="absolute inset-0 bg-grid opacity-50"></div>
            </div>
            
            <!-- 浮动装饰元素 -->
            <div class="absolute top-1/3 right-10 w-64 h-64 border border-primary/20 rounded-full animate-spin-slow" style="animation-duration: 40s;"></div>
            <div class="absolute bottom-1/3 left-10 w-40 h-40 border border-secondary/20 rounded-full animate-spin-slow" style="animation-duration: 30s; animation-direction: reverse;"></div>
            
            <div class="container mx-auto px-4 relative z-10">
                <div class="max-w-5xl mx-auto">
                    <!-- 顶部技术标签 -->
                    <div class="flex flex-wrap gap-2 mb-6 scroll-reveal">
                        <span class="px-3 py-1 bg-dark/80 border border-primary/30 text-primary text-sm rounded-full">v4.7.2</span>
                        <span class="px-3 py-1 bg-dark/80 border border-neon/30 text-neon text-sm rounded-full">NEW UPDATE</span>
                        <span class="px-3 py-1 bg-dark/80 border border-secondary/30 text-secondary text-sm rounded-full">OPEN BETA</span>
                    </div>
                    
                    <!-- 主标题 -->
                    <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold leading-tight mb-6 text-shadow-neon glitch-effect scroll-reveal" data-text="<?php echo $t['hero']['title']; ?>">
                        <?php echo $t['hero']['title']; ?>
                    </h1>
                    
                    <!-- 副标题 -->
                    <p class="text-xl md:text-2xl mb-10 text-light/80 max-w-2xl scroll-reveal">
                        <?php echo $t['hero']['subtitle']; ?>
                    </p>
                    
                    <!-- 行动按钮 -->
                    <div class="flex flex-col sm:flex-row gap-4 mb-12 scroll-reveal">
                        <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="bg-accent hover:bg-accent/90 text-light font-bold py-3 px-8 rounded shadow-neon-red text-lg flex items-center justify-center gap-2 transition-all transform hover:scale-105">
                            <?php echo $t['hero']['cta1']['text']; ?>
                            <i class="fa fa-rocket"></i>
                        </a>
                        <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="bg-transparent hover:bg-primary/10 text-primary border border-primary/50 font-bold py-3 px-8 rounded shadow-neon text-lg flex items-center justify-center gap-2 transition-all">
                            <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i>
                            <?php echo $t['hero']['cta2']['text']; ?>
                        </a>
                    </div>
                    
                    <!-- 主要游戏画面 -->
                    <div class="relative rounded-lg overflow-hidden border-glow scroll-reveal">
                        <img src="https://picsum.photos/id/2/1200/600" alt="游戏主画面" class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark via-transparent to-transparent"></div>
                        
                        <!-- 技术指标覆盖层 -->
                        <div class="absolute bottom-4 left-4 right-4 flex flex-wrap justify-between items-end gap-4">
                            <div>
                                <p class="text-xs text-primary/80 mb-1">CURRENT BUILD</p>
                                <p class="text-light font-bold"><?php echo $t['hero']['version']; ?></p>
                            </div>
                            <div class="flex gap-6">
                                <div class="text-right">
                                    <p class="text-xs text-primary/80 mb-1">PLAYERS</p>
                                    <p class="text-neon font-bold">148,392</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-primary/80 mb-1">SERVERS</p>
                                    <p class="text-primary font-bold">37</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-primary/80 mb-1">UPTIME</p>
                                    <p class="text-secondary font-bold">99.8%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 游戏特色与角色介绍 - 新布局：并排双列 -->
        <section class="py-20 relative overflow-hidden">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <!-- 左侧：游戏特色 -->
                    <div>
                        <div class="mb-8 scroll-reveal">
                            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow-neon">
                                <?php echo $t['features']['title']; ?>
                            </h2>
                            <p class="text-light/70 max-w-xl text-lg">
                                <?php echo $t['features']['subtitle']; ?>
                            </p>
                        </div>

                        <div class="space-y-6">
                            <?php $delay = 0; foreach($t['features']['items'] as $feature) : $delay += 150; ?>
                                <div class="content-panel p-6 rounded-lg border border-primary/20 hover:border-primary/40 transition-all scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                                    <div class="flex gap-4">
                                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                            <i class="fa <?php echo $feature['icon']; ?> text-xl text-primary"></i>
                                        </div>
                                        <div>
                                            <h3 class="text-xl font-bold mb-2 text-light"><?php echo $feature['title']; ?></h3>
                                            <p class="text-light/70 leading-relaxed"><?php echo $feature['desc']; ?></p>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <!-- 右侧：角色介绍 -->
                    <div>
                        <div class="mb-8 scroll-reveal">
                            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-secondary text-shadow-neon-purple">
                                <?php echo $t['characters']['title']; ?>
                            </h2>
                            <p class="text-light/70 max-w-xl text-lg">
                                <?php echo $t['characters']['subtitle']; ?>
                            </p>
                        </div>

                        <div class="relative">
                            <!-- 主角色卡片 -->
                            <div class="animated-border rounded-lg overflow-hidden shadow-xl mb-6 scroll-reveal">
                                <img src="<?php echo $t['characters']['items'][0]['image']; ?>" alt="<?php echo $t['characters']['items'][0]['alt']; ?>" class="w-full h-auto">
                                <div class="p-5 bg-dark/80 backdrop-blur-sm">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h3 class="text-2xl font-bold text-light"><?php echo $t['characters']['items'][0]['name']; ?></h3>
                                            <p class="text-secondary font-bold"><?php echo $t['characters']['items'][0]['class']; ?></p>
                                        </div>
                                        <span class="bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm border border-secondary/30">
                                            LVL 48
                                        </span>
                                    </div>
                                    <p class="text-light/70 mt-3 text-sm leading-relaxed">
                                        <?php echo $t['characters']['items'][0]['desc']; ?>
                                    </p>
                                </div>
                            </div>

                            <!-- 次要角色卡片（浮动在右下角） -->
                            <div class="absolute -bottom-10 -right-10 w-64 animated-border rounded-lg overflow-hidden shadow-xl scroll-reveal hidden md:block" style="transition-delay: 300ms;">
                                <img src="<?php echo $t['characters']['items'][1]['image']; ?>" alt="<?php echo $t['characters']['items'][1]['alt']; ?>" class="w-full h-36 object-cover">
                                <div class="p-4 bg-dark/80 backdrop-blur-sm">
                                    <h3 class="text-lg font-bold text-light"><?php echo $t['characters']['items'][1]['name']; ?></h3>
                                    <p class="text-primary text-sm"><?php echo $t['characters']['items'][1]['class']; ?></p>
                                </div>
                            </div>

                            <!-- 查看更多链接 -->
                            <div class="text-right mt-8 scroll-reveal">
                                <a href="#" class="inline-flex items-center gap-2 text-secondary font-bold hover:text-secondary/80 transition-colors border-b border-secondary/30 pb-1">
                                    <?php echo $t['characters']['moreLink']; ?>
                                    <i class="fa fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 游戏截图与预告片 - 新布局：截图网格 + 大型预告片 -->
        <section class="py-20 bg-dark/50 relative">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow-neon">
                        <?php echo $t['screenshots']['title']; ?>
                    </h2>
                    <p class="text-light/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['screenshots']['subtitle']; ?>
                    </p>
                </div>

                <!-- 截图网格 -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
                    <?php $delay = 0; foreach($t['screenshots']['items'] as $screenshot) : $delay += 100; ?>
                        <div class="scroll-reveal group" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="relative rounded-lg overflow-hidden border border-primary/20 hover:border-primary/50 transition-all h-48 cursor-pointer">
                                <img src="<?php echo $screenshot['image']; ?>" alt="<?php echo $screenshot['alt']; ?>" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                                    <p class="p-3 text-sm text-light truncate"><?php echo $screenshot['alt']; ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <!-- 查看更多截图 -->
                <div class="text-center mb-16 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-primary font-bold hover:text-primary/80 transition-colors border-b border-primary/30 pb-1">
                        <?php echo $t['screenshots']['moreLink']; ?>
                        <i class="fa fa-picture-o"></i>
                    </a>
                </div>

                <!-- 大型预告片 -->
                <div class="max-w-5xl mx-auto scroll-reveal">
                    <h3 class="text-2xl font-bold mb-6 text-secondary text-shadow-neon-purple">
                        <?php echo $t['trailer']['title']; ?>
                    </h3>
                    
                    <div class="relative animated-border rounded-lg overflow-hidden aspect-video cursor-pointer group">
                        <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-dark/40 flex items-center justify-center">
                            <div class="w-24 h-24 md:w-32 md:h-32 bg-accent/90 rounded-full flex items-center justify-center shadow-neon-red transform group-hover:scale-110 transition-transform">
                                <i class="fa fa-play text-light text-4xl md:text-5xl ml-2"></i>
                            </div>
                        </div>
                        
                        <!-- 视频信息 -->
                        <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center">
                            <div>
                                <h4 class="text-light font-bold text-lg"><?php echo $t['trailer']['alt']; ?></h4>
                                <p class="text-light/70 text-sm"><?php echo $t['trailer']['released']; ?></p>
                            </div>
                            <div class="bg-dark/70 text-light text-sm px-3 py-1 rounded-full flex items-center gap-2 border border-primary/30">
                                <i class="fa fa-clock-o text-primary"></i>
                                <span><?php echo $t['trailer']['duration']; ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 社区论坛与最新动态 - 新布局：标签式切换 -->
        <section class="py-20 relative">
            <div class="container mx-auto px-4">
                <!-- 标签切换器 -->
                <div class="max-w-5xl mx-auto mb-10 border-b border-primary/30 scroll-reveal">
                    <div class="flex">
                        <button id="forum-tab" class="py-4 px-6 text-primary border-b-2 border-primary font-bold">
                            <?php echo $t['forum']['title']; ?>
                        </button>
                        <button id="news-tab" class="py-4 px-6 text-light/60 hover:text-light border-b-2 border-transparent">
                            <?php echo $t['news']['title']; ?>
                        </button>
                    </div>
                </div>

                <!-- 内容区域 -->
                <div class="max-w-5xl mx-auto">
                    <!-- 论坛内容 -->
                    <div id="forum-content">
                        <p class="text-light/70 mb-8 text-center scroll-reveal">
                            <?php echo $t['forum']['subtitle']; ?>
                        </p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                            <?php $delay = 0; foreach($t['forum']['topics'] as $topic) : $delay += 150; ?>
                                <div class="scroll-reveal content-panel p-6 rounded-lg border border-primary/20 hover:border-primary/40 transition-all" style="transition-delay: <?php echo $delay; ?>ms">
                                    <div class="flex justify-between items-start mb-4">
                                        <h3 class="text-xl font-bold text-light"><?php echo $topic['name']; ?></h3>
                                        <span class="bg-primary/20 text-primary px-2 py-1 rounded text-xs">
                                            <?php echo $topic['count']; ?>
                                        </span>
                                    </div>
                                    <div class="flex justify-between items-center text-sm text-light/60">
                                        <span class="flex items-center gap-1">
                                            <i class="fa fa-user text-primary"></i> 
                                            <?php echo $topic['author']; ?>
                                        </span>
                                        <span class="flex items-center gap-1">
                                            <i class="fa fa-clock-o text-primary"></i> 
                                            <?php echo $topic['lastPost']; ?>
                                        </span>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <div class="text-center scroll-reveal">
                            <a href="#" class="inline-block bg-secondary hover:bg-secondary/90 text-light font-bold py-3 px-8 rounded shadow-neon-purple transition-colors">
                                <?php echo $t['forum']['cta']; ?>
                                <i class="fa fa-comments ml-2"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 新闻内容（默认隐藏） -->
                    <div id="news-content" class="hidden">
                        <p class="text-light/70 mb-8 text-center scroll-reveal">
                            <?php echo $t['news']['subtitle']; ?>
                        </p>

                        <div class="space-y-8 mb-10">
                            <?php $delay = 0; foreach($t['news']['items'] as $news) : $delay += 200; ?>
                                <div class="scroll-reveal content-panel rounded-lg overflow-hidden border border-primary/20 hover:border-primary/40 transition-all flex flex-col md:flex-row" style="transition-delay: <?php echo $delay; ?>ms">
                                    <div class="w-full md:w-1/3">
                                        <img src="<?php echo $news['image']; ?>" alt="" class="w-full h-full object-cover">
                                    </div>
                                    <div class="w-full md:w-2/3 p-6">
                                        <div class="flex justify-between items-center mb-3">
                                            <span class="bg-neon/20 text-neon px-3 py-1 rounded-full text-sm">
                                                <?php echo $news['category']; ?>
                                            </span>
                                            <span class="text-light/60 text-sm"><i class="fa fa-calendar-o mr-1 text-primary"></i> <?php echo $news['date']; ?></span>
                                        </div>
                                        <h3 class="text-xl font-bold mb-3 text-light"><?php echo $news['title']; ?></h3>
                                        <p class="text-light/70 text-sm mb-4 leading-relaxed">
                                            <?php echo $news['desc']; ?>
                                        </p>
                                        <a href="#" class="inline-flex items-center text-primary font-bold hover:text-primary/80 transition-colors mt-auto">
                                            <?php echo $t['readMore']; ?>
                                            <i class="fa fa-arrow-right ml-1"></i>
                                        </a>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <div class="text-center scroll-reveal">
                            <a href="#" class="inline-flex items-center gap-2 text-primary font-bold hover:text-primary/80 transition-colors border-b border-primary/30 pb-1">
                                <?php echo $t['news']['moreLink']; ?>
                                <i class="fa fa-newspaper-o"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 预注册 - 新布局：左侧表单右侧动态数据展示 -->
        <section id="pre-register" class="py-20 bg-gradient-to-br from-dark to-dark/80 relative overflow-hidden">
            <!-- 背景装饰 -->
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
                <div class="absolute -top-20 -left-20 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
                <div class="absolute bottom-0 right-0 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div>
                <div class="absolute top-1/2 left-1/2 w-64 h-64 bg-accent/5 rounded-full blur-3xl"></div>
            </div>

            <div class="container mx-auto px-4 relative z-10">
                <div class="max-w-6xl mx-auto">
                    <div class="text-center mb-12 scroll-reveal">
                        <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent">
                            <?php echo $t['preRegister']['title']; ?>
                        </h2>
                        <p class="text-light/70 max-w-2xl mx-auto text-lg">
                            <?php echo $t['preRegister']['subtitle']; ?>
                        </p>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
                        <!-- 左侧：注册表单 -->
                        <div class="lg:col-span-3 animated-border rounded-lg p-8 content-panel scroll-reveal">
                            <form class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="name" class="block text-sm font-bold text-light/80 mb-1">
                                            <?php echo $t['preRegister']['form']['name']; ?>
                                        </label>
                                        <input type="text" id="name" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>" 
                                            class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-light">
                                    </div>
                                    <div>
                                        <label for="phone" class="block text-sm font-bold text-light/80 mb-1">
                                            <?php echo $t['preRegister']['form']['phone']; ?>
                                        </label>
                                        <input type="tel" id="phone" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>" 
                                            class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-light">
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="email" class="block text-sm font-bold text-light/80 mb-1">
                                        <?php echo $t['preRegister']['form']['email']; ?>
                                    </label>
                                    <input type="email" id="email" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-light">
                                </div>
                                
                                <div>
                                    <label for="platform" class="block text-sm font-bold text-light/80 mb-1">
                                        <?php echo $lang == 'zh' ? '首选平台' : ($lang == 'ja' ? '優先プラットフォーム' : ($lang == 'ko' ? '선호 플랫폼' : 'Preferred Platform')); ?>
                                    </label>
                                    <select id="platform" class="w-full px-4 py-3 rounded-lg bg-dark/50 border border-primary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-light">
                                        <option value="pc"><?php echo $lang == 'zh' ? '电脑' : ($lang == 'ja' ? 'PC' : ($lang == 'ko' ? 'PC' : 'PC')); ?></option>
                                        <option value="ps5"><?php echo $lang == 'zh' ? 'PlayStation 5' : ($lang == 'ja' ? 'PlayStation 5' : ($lang == 'ko' ? 'PlayStation 5' : 'PlayStation 5')); ?></option>
                                        <option value="xbox"><?php echo $lang == 'zh' ? 'Xbox Series X' : ($lang == 'ja' ? 'Xbox Series X' : ($lang == 'ko' ? 'Xbox Series X' : 'Xbox Series X')); ?></option>
                                        <option value="mobile"><?php echo $lang == 'zh' ? '移动设备' : ($lang == 'ja' ? 'モバイル' : ($lang == 'ko' ? '모바일' : 'Mobile')); ?></option>
                                    </select>
                                </div>
                                
                                <div class="flex items-start">
                                    <input type="checkbox" id="agreement" class="mt-1 accent-primary">
                                    <label for="agreement" class="ml-2 text-sm text-light/70">
                                        <?php echo $t['preRegister']['form']['agreement']; ?>
                                    </label>
                                </div>
                                
                                <button type="submit" class="w-full bg-accent hover:bg-accent/90 text-light font-bold py-3 px-6 rounded shadow-neon-red text-lg transition-all transform hover:scale-[1.02]">
                                    <?php echo $t['preRegister']['form']['submit']; ?>
                                    <i class="fa fa-paper-plane ml-2"></i>
                                </button>
                            </form>

                            <div class="mt-6 bg-neon/10 border border-neon/30 rounded-lg p-4 flex items-start">
                                <i class="fa fa-gift text-neon text-xl mt-1 mr-3"></i>
                                <p class="text-sm text-light/80 font-bold">
                                    <?php echo $t['preRegister']['gift']; ?>
                                </p>
                            </div>
                        </div>

                        <!-- 右侧：数据展示 -->
                        <div class="lg:col-span-2 space-y-8">
                            <!-- 数据统计 -->
                            <div class="animated-border rounded-lg p-6 content-panel scroll-reveal" style="transition-delay: 200ms;">
                                <h3 class="text-xl font-bold mb-6 text-center text-primary">
                                    <i class="fa fa-bar-chart mr-2"></i> <?php echo $lang == 'zh' ? '注册数据' : ($lang == 'ja' ? '登録データ' : ($lang == 'ko' ? '가입 데이터' : 'Registration Data')); ?>
                                </h3>

                                <div class="space-y-6">
                                    <?php foreach($t['preRegister']['stats'] as $stat) : ?>
                                        <div>
                                            <div class="flex justify-between items-center mb-2">
                                                <span class="text-light/80"><?php echo $stat['label']; ?></span>
                                                <span class="text-primary font-bold"><?php echo $stat['value']; ?></span>
                                            </div>
                                            <div class="w-full bg-dark/50 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: <?php echo rand(70, 95); ?>%"></div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <!-- 倒计时 -->
                            <div class="animated-border rounded-lg p-6 content-panel scroll-reveal" style="transition-delay: 400ms;">
                                <h3 class="text-xl font-bold mb-6 text-center text-secondary">
                                    <i class="fa fa-clock-o mr-2"></i> <?php echo $lang == 'zh' ? '发布倒计时' : ($lang == 'ja' ? 'リリースカウントダウン' : ($lang == 'ko' ? '출시 카운트다운' : 'Launch Countdown')); ?>
                                </h3>

                                <div class="grid grid-cols-4 gap-2 text-center">
                                    <div class="bg-dark/50 rounded-lg p-3">
                                        <div class="text-2xl font-bold text-primary" id="days">14</div>
                                        <div class="text-xs text-light/60"><?php echo $lang == 'zh' ? '天' : ($lang == 'ja' ? '日' : ($lang == 'ko' ? '일' : 'Days')); ?></div>
                                    </div>
                                    <div class="bg-dark/50 rounded-lg p-3">
                                        <div class="text-2xl font-bold text-primary" id="hours">08</div>
                                        <div class="text-xs text-light/60"><?php echo $lang == 'zh' ? '时' : ($lang == 'ja' ? '時間' : ($lang == 'ko' ? '시간' : 'Hours')); ?></div>
                                    </div>
                                    <div class="bg-dark/50 rounded-lg p-3">
                                        <div class="text-2xl font-bold text-primary" id="minutes">45</div>
                                        <div class="text-xs text-light/60"><?php echo $lang == 'zh' ? '分' : ($lang == 'ja' ? '分' : ($lang == 'ko' ? '분' : 'Mins')); ?></div>
                                    </div>
                                    <div class="bg-dark/50 rounded-lg p-3">
                                        <div class="text-2xl font-bold text-primary" id="seconds">33</div>
                                        <div class="text-xs text-light/60"><?php echo $lang == 'zh' ? '秒' : ($lang == 'ja' ? '秒' : ($lang == 'ko' ? '초' : 'Secs')); ?></div>
                                    </div>
                                </div>
                            </div>

                            <!-- 游戏画面预览 -->
                            <div class="animated-border rounded-lg overflow-hidden scroll-reveal" style="transition-delay: 600ms;">
                                <img src="https://picsum.photos/id/3/600/400" alt="游戏画面预览" class="w-full h-auto">
                                <div class="p-4 bg-dark/80 backdrop-blur-sm text-center">
                                    <span class="text-xs text-primary/80"><?php echo $lang == 'zh' ? '即将到来的更新' : ($lang == 'ja' ? '次回アップデート' : ($lang == 'ko' ? '곧 출시될 업데이트' : 'Upcoming Update')); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark border-t border-primary/30 py-12 relative">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-10">
                <!-- Logo和描述 -->
                <div class="md:col-span-4">
                    <div class="flex items-center gap-2 text-2xl font-bold text-primary text-shadow-neon mb-4">
                        <i class="fa fa-microchip text-neon"></i>
                        <span><?php echo $t['siteTitle']; ?></span>
                    </div>
                    <p class="text-light/60 mb-6 leading-relaxed">
                        <?php echo $t['footer']['description']; ?>
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-primary/30 flex items-center justify-center hover:bg-primary/10 transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-primary/30 flex items-center justify-center hover:bg-primary/10 transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-primary/30 flex items-center justify-center hover:bg-primary/10 transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-primary/30 flex items-center justify-center hover:bg-primary/10 transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>

                <!-- 链接组 -->
                <div class="md:col-span-8 grid grid-cols-2 md:grid-cols-3 gap-8">
                    <?php foreach($t['footer']['links'] as $linkGroup) : ?>
                        <div>
                            <h4 class="text-lg font-bold mb-4 text-primary"><?php echo $linkGroup['title']; ?></h4>
                            <ul class="space-y-2">
                                <?php foreach($linkGroup['items'] as $item) : ?>
                                    <li>
                                        <a href="<?php echo $item['link']; ?>" class="text-light/60 hover:text-primary transition-colors flex items-center gap-1">
                                            <i class="fa fa-angle-right text-xs text-primary/70"></i>
                                            <?php echo $item['name']; ?>
                                        </a>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- 订阅区域 -->
            <div class="border-t border-primary/20 pt-8 pb-8 mb-8">
                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                    <div>
                        <h4 class="text-lg font-bold mb-1 text-primary"><?php echo $t['footer']['subscribe']; ?></h4>
                        <p class="text-light/60 text-sm">
                            <?php echo $t['footer']['subscribeDesc']; ?>
                        </p>
                    </div>
                    <form class="w-full md:w-auto">
                        <div class="flex flex-col sm:flex-row gap-2">
                            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" 
                                class="flex-1 px-4 py-2 rounded-lg focus:outline-none bg-dark/50 border border-primary/30 focus:border-primary text-light min-w-0">
                            <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-lg transition-colors whitespace-nowrap">
                                <i class="fa fa-paper-plane mr-1"></i> <?php echo $lang == 'zh' ? '订阅' : ($lang == 'ja' ? '購読' : ($lang == 'ko' ? '구독' : 'Subscribe')); ?>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 版权信息 -->
            <div class="border-t border-primary/20 pt-6">
                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                    <p class="text-light/60 text-sm">
                        <?php echo $t['footer']['copyright']; ?>
                    </p>
                    <div class="flex flex-wrap justify-center gap-4 text-sm">
                        <?php foreach($t['footer']['legalLinks'] as $link) : ?>
                            <a href="<?php echo $link['link']; ?>" class="text-light/60 hover:text-primary transition-colors px-2 py-1">
                                <?php echo $link['name']; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const nav = document.getElementById('main-nav');
            nav.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('main-nav').classList.add('hidden');
                }
            });
        });

        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow-neon');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2', 'shadow-neon');
            }
        });

        // 滚动显示动画
        function checkScroll() {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                if (elementPosition < windowHeight - 100) {
                    element.classList.add('active');
                }
            });
        }

        // 标签切换功能
        document.getElementById('forum-tab').addEventListener('click', function() {
            document.getElementById('forum-content').classList.remove('hidden');
            document.getElementById('news-content').classList.add('hidden');
            
            this.classList.add('text-primary', 'border-primary');
            this.classList.remove('text-light/60', 'border-transparent');
            
            document.getElementById('news-tab').classList.add('text-light/60', 'border-transparent');
            document.getElementById('news-tab').classList.remove('text-primary', 'border-primary');
        });

        document.getElementById('news-tab').addEventListener('click', function() {
            document.getElementById('news-content').classList.remove('hidden');
            document.getElementById('forum-content').classList.add('hidden');
            
            this.classList.add('text-primary', 'border-primary');
            this.classList.remove('text-light/60', 'border-transparent');
            
            document.getElementById('forum-tab').classList.add('text-light/60', 'border-transparent');
            document.getElementById('forum-tab').classList.remove('text-primary', 'border-primary');
        });

        // 倒计时功能
        function updateCountdown() {
            // 模拟倒计时 - 实际项目中应使用未来的日期
            const secondsEl = document.getElementById('seconds');
            let seconds = parseInt(secondsEl.textContent);
            
            seconds = (seconds - 1 + 60) % 60;
            secondsEl.textContent = seconds.toString().padStart(2, '0');
            
            if (seconds === 59) {
                const minutesEl = document.getElementById('minutes');
                let minutes = parseInt(minutesEl.textContent);
                minutes = (minutes - 1 + 60) % 60;
                minutesEl.textContent = minutes.toString().padStart(2, '0');
                
                if (minutes === 59) {
                    const hoursEl = document.getElementById('hours');
                    let hours = parseInt(hoursEl.textContent);
                    hours = (hours - 1 + 24) % 24;
                    hoursEl.textContent = hours.toString().padStart(2, '0');
                    
                    if (hours === 23) {
                        const daysEl = document.getElementById('days');
                        let days = parseInt(daysEl.textContent);
                        days = Math.max(0, days - 1);
                        daysEl.textContent = days.toString();
                    }
                }
            }
        }

        // 初始化
        window.addEventListener('load', function() {
            checkScroll();
            // 启动倒计时
            setInterval(updateCountdown, 1000);
        });
        
        // 滚动时检查
        window.addEventListener('scroll', checkScroll);
    </script>
</body>
</html>
    